
#{extends 'Secure/layout.html' /} %{
isConnected=controllers.Security.isConnected(); }%

<head>
<script src="@{'/public/javascripts/cufon-yui.js'}"
	type="text/javascript"></script>
<script src="@{'/public/javascripts/ChunkFive_400.font.js'}"
	type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/style.css'}" />
<link rel="stylesheet" type="text/css" href="@{'/public/stylesheets/main.css'}" />


<script type="text/javascript">
	Cufon.replace('h1', {
		textShadow : '1px 1px #fff'
	});
	Cufon.replace('h2', {
		textShadow : '1px 1px #fff'
	});
	Cufon.replace('h3', {
		textShadow : '1px 1px #000'
	});
	Cufon.replace('.back');
</script>
<script type="text/javascript"
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



<script type="text/javascript">
	$(function() {
		//the form wrapper (includes all forms)
		var $form_wrapper = $('#form_wrapper'),
		//the current form is the one with class active
		$currentForm = $form_wrapper.children('form.active'),
		//the change form links
		$linkform = $form_wrapper.find('.linkform');

		//get width and height of each form and store them for later                                            
		$form_wrapper.children('form').each(function(i) {
			var $theForm = $(this);
			//solve the inline display none problem when using fadeIn fadeOut
			if (!$theForm.hasClass('active'))
				$theForm.hide();
			$theForm.data({
				width : $theForm.width(),
				height : $theForm.height()
			});
		});

		//set width and height of wrapper (same of current form)
		setWrapperWidth();

		/*
		clicking a link (change form event) in the form
		makes the current form hide.
		The wrapper animates its width and height to the 
		width and height of the new current form.
		After the animation, the new form is shown
		 */
		$linkform.bind('click', function(e) {
			var $link = $(this);
			var target = $link.attr('rel');
			$currentForm.fadeOut(400, function() {
				//remove class active from current form
				$currentForm.removeClass('active');
				//new current form
				$currentForm = $form_wrapper.children('form.' + target);
				//animate the wrapper
				$form_wrapper.stop().animate({
					width : $currentForm.data('width') + 'px',
					height : $currentForm.data('height') + 'px'
				}, 500, function() {
					//new form gets class active
					$currentForm.addClass('active');
					//show the new form
					$currentForm.fadeIn(400);
				});
			});
			e.preventDefault();
		});

		function setWrapperWidth() {
			$form_wrapper.css({
				width : $currentForm.data('width') + 'px',
				height : $currentForm.data('height') + 'px'
			});
		}

		/*
		for the demo we disabled the submit buttons
		if you submit the form, you need to check the 
		which form was submited, and give the class active 
		to the form you want to show
		 */

	});
</script>
</head>



<div class="wrapper">
	<div class="content">
		<div id="form_wrapper" class="form_wrapper">
			<form class="register">
				<h3>Register</h3>
				<div class="column">
					<div>
						<label>First Name:</label> <input type="text" /> <span
							class="error">This is an error</span>
					</div>
					<div>
						<label>Last Name:</label> <input type="text" /> <span
							class="error">This is an error</span>
					</div>
					<div>
						<label>Website:</label> <input type="text" value="http://" /> <span
							class="error">This is an error</span>
					</div>
				</div>
				<div class="column">
					<div>
						<label>Username:</label> <input type="text" /> <span
							class="error">This is an error</span>
					</div>
					<div>
						<label>Email:</label> <input type="text" /> <span class="error">This
							is an error</span>
					</div>
					<div>
						<label>Password:</label> <input type="password" /> <span
							class="error">This is an error</span>
					</div>
				</div>
				<div class="bottom">
					<div class="remember">
						<input type="checkbox" /> <span>Send me updates</span>
					</div>
					<input type="submit" value="Register" /> <a href="index.html"
						rel="login" class="linkform">You have an account already? Log
						in here</a>
					<div class="clear"></div>
				</div>
			</form>

			<form class="login active" action=@{Secure.authenticate()}
				method="post">
				#{if isConnected}
				<!--  comment-->
				<br> <br> <br> <b><center>Sorry, you are
						logged in already!!</center> </b><br> <br> <a
					href="@{Application.index()}">
					<center>Click Here to go to Home Page</center> </a><br> <br>
				<a href="http://localhost:9000/logout">
					<center>Click Here to go to log out</center> </a><br> <br>
				#{/if} #{else} #{if flash.error}
				<p class="error">&{flash.error}</p>
				#{/if} #{if flash.success}
				<p class="success">&{flash.success}</p>
				#{/if}
				<h3>Login</h3>
				<div>
					<label>Username:</label> <input type="text" name="username" /> <span
						class="error">This is an error</span>
				</div>
				<div>
					<label>Password: <a href="forgot_password.html"
						rel="forgot_password" class="forgot linkform">Forgot your
							password?</a> </label> <input type="password" name="password" /> <span
						class="error">This is an error</span>
				</div>
				<div class="bottom">
					<div class="remember">
						<input type="checkbox" /><span>Keep me logged in</span>
					</div>
					<input type="submit" value="Login"></input> <a href="register.html"
						rel="register" class="linkform">You don't have an account yet?
						Register here</a>
					<div class="clear"></div>
				</div>
				#{/else}

			</form>
			

			<form class="forgot_password"  action=@{Security.sendEmail(email)} method="post">
				<h3>Forgot Password</h3>
				<label>Email:</label>
					<input type="text" name="email" /> <span class="error">This is an error</span>
					<div class="bottom">
						<input type="submit" value="Send reminder"></input> 
						<a href="index.html" rel="login" class="linkform">Suddenly remebered? Log in here</a> <a href="register.html" rel="register"
							class="linkform">You don't have an account? Register here</a>
						<div class="clear"></div>
					</div>


		
			<div class="clear"></div>
			</form>
		</div>


	</div>
</div>
